WebCodecs VideoFrame Plane: Dybdegående Gennemgang af Adgang til Videobilleddata

WebCodecs repræsenterer et paradigmeskift inden for webbaseret mediebehandling. Det giver lav-niveau adgang til mediers byggeklodser, hvilket gør det muligt for udviklere at skabe sofistikerede applikationer direkte i browseren. En af de mest kraftfulde funktioner i WebCodecs er VideoFrame-objektet, og inden i det, VideoFrame-planerne, der eksponerer de rå pixeldata fra videobilleder. Denne artikel giver en omfattende guide til at forstå og udnytte VideoFrame-planer til avanceret videomanipulation.

Forståelse af VideoFrame-objektet

Før vi dykker ned i planer, lad os opsummere VideoFrame-objektet selv. Et VideoFrame repræsenterer et enkelt billede i en video. Det indkapsler de dekodede (eller kodede) videodata sammen med tilhørende metadata som tidsstempel, varighed og formatinformation. VideoFrame API'et tilbyder metoder til:

• Læsning af pixeldata: Det er her, planerne kommer ind i billedet.
• Kopiering af frames: Oprettelse af nye VideoFrame-objekter fra eksisterende.
• Lukning af frames: Frigørelse af de underliggende ressourcer, som framen holder på.

VideoFrame-objektet oprettes under dekodningsprocessen, typisk af en VideoDecoder, eller manuelt, når man opretter en brugerdefineret frame.

Hvad er VideoFrame-planer?

Et VideoFrames pixeldata er ofte organiseret i flere planer, især i formater som YUV. Hvert plan repræsenterer en forskellig komponent af billedet. For eksempel, i et YUV420-format, er der tre planer:

• Y (Luma): Repræsenterer billedets lysstyrke (luminans). Dette plan indeholder gråtoneinformationen.
• U (Cb): Repræsenterer den blå-differens chroma-komponent.
• V (Cr): Repræsenterer den rød-differens chroma-komponent.

RGB-formater, selvom de umiddelbart virker enklere, kan også i nogle tilfælde bruge flere planer. Antallet af planer og deres betydning afhænger udelukkende af VideoPixelFormat for VideoFrame'et.

Fordelen ved at bruge planer er, at det muliggør effektiv adgang og manipulation af specifikke farvekomponenter. For eksempel vil du måske kun justere luminansen (Y-planet) uden at påvirke farven (U- og V-planerne).

Adgang til VideoFrame-planer: API'et

VideoFrame API'et giver følgende metoder til at få adgang til plandata:

• copyTo(destination, options): Kopierer indholdet af VideoFrame til en destination, som kan være et andet VideoFrame, et CanvasImageBitmap, eller et ArrayBufferView. options-objektet styrer, hvilke planer der kopieres, og hvordan. Dette er den primære mekanisme for adgang til planer.

options-objektet i copyTo-metoden giver dig mulighed for at specificere layoutet og målet for videobilleddataene. Nøgleegenskaber inkluderer:

• format: Det ønskede pixelformat for de kopierede data. Dette kan være det samme som det originale VideoFrame eller et andet format (f.eks. konvertering fra YUV til RGB).
• codedWidth og codedHeight: Bredden og højden af videobilledet i pixels.
• layout: En række objekter, der beskriver layoutet af hvert plan i hukommelsen. Hvert objekt i rækken specificerer:
• offset: Forskydningen, i bytes, fra starten af databufferen til starten af planens data.
• stride: Antallet af bytes mellem starten af hver række i planet. Dette er afgørende for håndtering af padding.

Lad os se på et eksempel med at kopiere et YUV420 VideoFrame til en rå buffer:

async function copyYUV420ToBuffer(videoFrame, buffer) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  // YUV420 har 3 planer: Y, U og V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const layout = [
    { offset: 0, stride: width }, // Y-plan
    { offset: yPlaneSize, stride: width / 2 }, // U-plan
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V-plan
  ];

  await videoFrame.copyTo(buffer, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  videoFrame.close(); // Vigtigt at frigøre ressourcer
}

Forklaring:

• Vi beregner størrelsen af hvert plan baseret på width og height. Y har fuld opløsning, mens U og V er subsamplet (4:2:0).
• layout-arrayet definerer hukommelseslayoutet. offset specificerer, hvor hvert plan starter i bufferen, og stride specificerer antallet af bytes, man skal springe for at komme til næste række i det pågældende plan.
• format-optionen er sat til 'I420', som er et almindeligt YUV420-format.
• Kritisk er det, at videoFrame.close() kaldes efter kopieringen for at frigøre ressourcer.

Pixelformater: En Verden af Muligheder

Forståelse af pixelformater er afgørende for at arbejde med VideoFrame-planer. VideoPixelFormat definerer, hvordan farveinformationen er kodet i videobilledet. Her er nogle almindelige pixelformater, du kan støde på:

• I420 (YUV420p): Et planært YUV-format, hvor Y-, U- og V-komponenter gemmes i separate planer. U og V er subsamplet med en faktor på 2 i både den horisontale og vertikale dimension. Det er et meget almindeligt og effektivt format.
• NV12 (YUV420sp): Et semi-planært YUV-format, hvor Y gemmes i ét plan, og U- og V-komponenter er sammenflettet i et andet plan.
• RGBA: Rød, Grøn, Blå og Alpha-komponenter gemmes i et enkelt plan, typisk med 8 bit pr. komponent (32 bit pr. pixel). Rækkefølgen af komponenter kan variere (f.eks. BGRA).
• RGB565: Rød, Grøn og Blå-komponenter gemmes i et enkelt plan med 5 bit for Rød, 6 bit for Grøn og 5 bit for Blå (16 bit pr. pixel).
• GRAYSCALE: Repræsenterer gråtonebilleder med en enkelt luma (lysstyrke) værdi for hver pixel.

VideoFrame.format-egenskaben vil fortælle dig pixelformatet for en given frame. Sørg for at tjekke denne egenskab, før du forsøger at få adgang til planerne. Du kan konsultere WebCodecs-specifikationen for en komplet liste over understøttede formater.

Praktiske Anvendelsesmuligheder

Adgang til VideoFrame-planer åbner op for en bred vifte af muligheder for avanceret videobehandling i browseren. Her er nogle eksempler:

1. Realtidsvideoeffekter

Du kan anvende realtidsvideoeffekter ved at manipulere pixeldataene i VideoFrame. For eksempel kunne du implementere et gråtonefilter ved at tage gennemsnittet af R-, G- og B-komponenterne for hver pixel i en RGBA-frame og derefter sætte alle tre komponenter til den gennemsnitlige værdi. Du kan også skabe en sepia-tone effekt eller justere lysstyrke og kontrast.

async function applyGrayscale(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;
  const buffer = new ArrayBuffer(width * height * 4); // RGBA
  const rgba = new Uint8ClampedArray(buffer);

  await videoFrame.copyTo(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height
  });

  for (let i = 0; i < rgba.length; i += 4) {
    const r = rgba[i];
    const g = rgba[i + 1];
    const b = rgba[i + 2];

    const gray = (r + g + b) / 3;

    rgba[i] = gray;       // Rød
    rgba[i + 1] = gray;   // Grøn
    rgba[i + 2] = gray;   // Blå
  }

  // Opret en ny VideoFrame fra de modificerede data.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Frigør den oprindelige frame
  return newFrame;
}

2. Anvendelser inden for Computersyn

VideoFrame-planer giver direkte adgang til de pixeldata, der er nødvendige for computersynsopgaver. Du kan bruge disse data til at implementere algoritmer for objektdetektering, ansigtsgenkendelse, bevægelsessporing og mere. Du kan udnytte WebAssembly til ydeevnekritiske sektioner af din kode.

For eksempel kunne du konvertere et farve-VideoFrame til gråtoner og derefter anvende en kantdetekteringsalgoritme (f.eks. Sobel-operatoren) for at identificere kanter i billedet. Dette kunne bruges som et forbehandlingstrin for objektgenkendelse.

3. Videoredigering og Compositing

Du kan bruge VideoFrame-planer til at implementere videoredigeringsfunktioner som beskæring, skalering, rotation og compositing. Ved at manipulere pixeldataene direkte kan du skabe brugerdefinerede overgange og effekter.

For eksempel kunne du beskære et VideoFrame ved kun at kopiere en del af pixeldataene til et nyt VideoFrame. Du ville justere layout-offsets og strides i overensstemmelse hermed.

4. Brugerdefinerede Codecs og Transcoding

Mens WebCodecs giver indbygget understøttelse for almindelige codecs som AV1, VP9 og H.264, kan du også bruge det til at implementere brugerdefinerede codecs eller transcoding-pipelines. Du ville skulle håndtere kodnings- og dekodningsprocessen selv, men VideoFrame-planer giver dig mulighed for at få adgang til og manipulere de rå pixeldata. Dette kan være nyttigt for niche-videoformater eller specialiserede kodningskrav.

5. Avanceret Analyse

Ved at få adgang til de underliggende pixeldata kan du udføre dybdegående analyse af videoindhold. Dette inkluderer opgaver som at måle den gennemsnitlige lysstyrke i en scene, identificere dominerende farver eller opdage ændringer i sceneindhold. Dette kan muliggøre avancerede videoanalyseapplikationer til sikkerhed, overvågning eller indholdsanalyse.

Arbejde med Canvas og WebGL

Selvom du direkte kan manipulere pixeldataene i VideoFrame-planer, har du ofte brug for at gengive resultatet på skærmen. CanvasImageBitmap-interfacet udgør en bro mellem VideoFrame og <canvas>-elementet. Du kan oprette et CanvasImageBitmap fra et VideoFrame og derefter tegne det på lærredet ved hjælp af drawImage()-metoden.

async function renderVideoFrameToCanvas(videoFrame, canvas) {
  const bitmap = await createImageBitmap(videoFrame);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close(); // Frigør bitmap-ressourcer
  videoFrame.close(); // Frigør VideoFrame-ressourcer
}

For mere avanceret rendering kan du bruge WebGL. Du kan uploade pixeldataene fra VideoFrame-planer til WebGL-teksturer og derefter bruge shaders til at anvende effekter og transformationer. Dette giver dig mulighed for at udnytte GPU'en til højtydende videobehandling.

Overvejelser om Ydeevne

At arbejde med rå pixeldata kan være beregningsmæssigt intensivt, så det er afgørende at overveje ydeevneoptimering. Her er nogle tips:

• Minimer kopieringer: Undgå unødvendig kopiering af pixeldata. Prøv at udføre operationer in-place, når det er muligt.
• Brug WebAssembly: Til ydeevnekritiske sektioner af din kode, overvej at bruge WebAssembly. WebAssembly kan levere næsten-native ydeevne for beregningsmæssigt intensive opgaver.
• Optimer hukommelseslayout: Vælg det rigtige pixelformat og hukommelseslayout til din applikation. Overvej at bruge pakkede formater (f.eks. RGBA), hvis du ikke ofte har brug for at få adgang til individuelle farvekomponenter.
• Brug OffscreenCanvas: Til baggrundsbehandling, brug OffscreenCanvas for at undgå at blokere hovedtråden.
• Profilér din kode: Brug browserens udviklerværktøjer til at profilere din kode og identificere flaskehalse i ydeevnen.

Browserkompatibilitet

WebCodecs og VideoFrame API'et understøttes i de fleste moderne browsere, herunder Chrome, Firefox og Safari. Dog kan graden af understøttelse variere afhængigt af browserversion og operativsystem. Tjek de seneste browserkompatibilitetstabeller på sider som MDN Web Docs for at sikre, at de funktioner, du bruger, understøttes i dine mål-browsere. For tvær-browser-kompatibilitet anbefales funktionsdetektering.

Almindelige Faldgruber og Fejlfinding

Her er nogle almindelige faldgruber, du skal undgå, når du arbejder med VideoFrame-planer:

• Forkert layout: Sørg for, at layout-arrayet nøjagtigt beskriver hukommelseslayoutet for pixeldataene. Forkerte offsets eller strides kan føre til korrupte billeder.
• Uoverensstemmende pixelformater: Sørg for, at det pixelformat, du specificerer i copyTo-metoden, matcher det faktiske format af VideoFrame.
• Hukommelseslæk: Luk altid VideoFrame- og CanvasImageBitmap-objekter, når du er færdig med dem, for at frigøre de underliggende ressourcer. Hvis du undlader at gøre dette, kan det føre til hukommelseslæk.
• Asynkrone operationer: Husk, at copyTo er en asynkron operation. Brug await for at sikre, at kopieringsoperationen er fuldført, før du får adgang til pixeldataene.
• Sikkerhedsbegrænsninger: Vær opmærksom på sikkerhedsbegrænsninger, der kan gælde, når du får adgang til pixeldata fra videoer med cross-origin.

Eksempel: Konvertering fra YUV til RGB

Lad os overveje et mere komplekst eksempel: konvertering af et YUV420 VideoFrame til et RGB VideoFrame. Dette indebærer at læse Y-, U- og V-planerne, konvertere dem til RGB-værdier og derefter oprette et nyt RGB VideoFrame.

Denne konvertering kan implementeres ved hjælp af følgende formel:

R = Y + 1.402 * (Cr - 128)
G = Y - 0.34414 * (Cb - 128) - 0.71414 * (Cr - 128)
B = Y + 1.772 * (Cb - 128)

Her er koden:

async function convertYUV420ToRGBA(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const yuvBuffer = new ArrayBuffer(yPlaneSize + 2 * uvPlaneSize);
  const yuvPlanes = new Uint8ClampedArray(yuvBuffer);

  const layout = [
    { offset: 0, stride: width }, // Y-plan
    { offset: yPlaneSize, stride: width / 2 }, // U-plan
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V-plan
  ];

  await videoFrame.copyTo(yuvPlanes, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  const rgbaBuffer = new ArrayBuffer(width * height * 4);
  const rgba = new Uint8ClampedArray(rgbaBuffer);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const yIndex = y * width + x;
      const uIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize;
      const vIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize + uvPlaneSize;

      const Y = yuvPlanes[yIndex];
      const U = yuvPlanes[uIndex] - 128;
      const V = yuvPlanes[vIndex] - 128;

      let R = Y + 1.402 * V;
      let G = Y - 0.34414 * U - 0.71414 * V;
      let B = Y + 1.772 * U;

      R = Math.max(0, Math.min(255, R));
      G = Math.max(0, Math.min(255, G));
      B = Math.max(0, Math.min(255, B));

      const rgbaIndex = y * width * 4 + x * 4;
      rgba[rgbaIndex] = R;
      rgba[rgbaIndex + 1] = G;
      rgba[rgbaIndex + 2] = B;
      rgba[rgbaIndex + 3] = 255; // Alpha
    }
  }

  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Frigør den oprindelige frame
  return newFrame;
}

Dette eksempel demonstrerer kraften og kompleksiteten ved at arbejde med VideoFrame-planer. Det kræver en god forståelse af pixelformater, hukommelseslayout og farverumskonverteringer.

Konklusion

VideoFrame-plan API'et i WebCodecs låser op for et nyt niveau af kontrol over videobehandling i browseren. Ved at forstå, hvordan man får adgang til og manipulerer pixeldata direkte, kan du skabe avancerede applikationer til realtidsvideoeffekter, computersyn, videoredigering og mere. Selvom det kan være udfordrende at arbejde med VideoFrame-planer, er de potentielle gevinster betydelige. Efterhånden som WebCodecs fortsætter med at udvikle sig, vil det utvivlsomt blive et vigtigt værktøj for webudviklere, der arbejder med medier.

Vi opfordrer dig til at eksperimentere med VideoFrame-plan API'et og udforske dets muligheder. Ved at forstå de underliggende principper og anvende bedste praksis kan du skabe innovative og ydedygtige videoapplikationer, der skubber grænserne for, hvad der er muligt i browseren.

Yderligere Læsning

• MDN Web Docs om WebCodecs
• WebCodecs-specifikationen
• WebCodecs-eksempelkode-repositories på GitHub.